<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Inner Page - Delicious Bootstrap Template</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link th:href="@{/assets/img/favicon.png}" rel="icon">
  <link th:href="@{/assets/img/apple-touch-icon.png}" rel="apple-touch-icon">


  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,600,600i,700,700i|Satisfy|Comic+Neue:300,300i,400,400i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link th:href="@{/assets/vendor/animate.css/animate.min.css}" rel="stylesheet">
  <link th:href="@{/assets/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/assets/vendor/bootstrap-icons/bootstrap-icons.css}" rel="stylesheet">
  <link th:href="@{/assets/vendor/boxicons/css/boxicons.min.css}" rel="stylesheet">
  <link th:href="@{/assets/vendor/glightbox/css/glightbox.min.css}" rel="stylesheet">
  <link th:href="@{/assets/vendor/swiper/swiper-bundle.min.css}" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link th:href="@{/assets/css/style.css}" rel="stylesheet">
</head>
<body>
<section th:replace="index::#hero"></section>

<!-- ======= Top Bar ======= -->
<section id="topbar" class="d-flex align-items-center fixed-top ">
  <div class="container-fluid container-xl d-flex align-items-center justify-content-center justify-content-lg-start">
    <i class="bi bi-phone d-flex align-items-center"><span>+1 5589 55488 55</span></i>
    <i class="bi bi-clock ms-4 d-none d-lg-flex align-items-center"><span>Mon-Sat: 11:00 AM - 23:00 PM</span></i>
  </div>
</section>

<!-- ======= Header ======= -->
<header th:replace="index::#header"></header><!-- End Header -->

<main id="main">

  <!-- ======= Breadcrumbs Section ======= -->
  <section id="menu" class="menu">
    <div class="container" style="margin: 0 auto;width: 50%">

      <div class="section-title">
        <h2>Check our tasty <span>Menu</span></h2>
      </div>

      <div class="row">
        <div class="col-lg-12 d-flex justify-content-center">
          <ul id="menu-flters" v-for="f in ftypes">
            <li data-filter="*" v-on:click="getByFtype(f.ftype)">{{f.ftype}}</li>
          </ul>
        </div>
      </div>
      <div class="row menu-container" v-for="food in foods" >
        <div class="col-lg-6 menu-item filter-starters" style="float: left">
          <div class="menu-content" >
            <a href="#">{{food.fname}}</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{food.price}}</span>
          </div>
          <div class="menu-ingredients" >{{food.fdesc}}</div>
        </div>
        <div>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <img :src="`../assets/img/${food.image}`" alt="" style="width: 150px;height: 150px">
        </div>
      </div>
    </div>
  </section>

</main><!-- End #main -->

<!-- ======= Footer ======= -->
<footer th:replace="index::#footer"></footer>
<!-- End Footer -->

<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

<!-- Vendor JS Files -->
<script th:src="@{/assets/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/assets/vendor/glightbox/js/glightbox.min.js}"></script>
<script th:src="@{/assets/vendor/isotope-layout/isotope.pkgd.min.js}"></script>
<script th:src="@{/assets/vendor/swiper/swiper-bundle.min.js}"></script>
<script th:src="@{/assets/vendor/php-email-form/validate.js}"></script>

<!-- Template Main JS File -->
<script th:src="@{/assets/js/main.js}"></script>
</body>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.min.js"></script>
<script>
  var v = new Vue({
    el:"#menu",
    data:{
      foods:[],
      ftypes:[]
    },
    mounted:function () {
      axios.get("menu/menus").then(res=>{
                this.foods = res.data.data;
              }
      )
    },
    created:function () {
      axios.get("foodtype").then(res=>{
        this.ftypes = res.data.data;
      })
    },
    methods:{
      getByFtype(ftype){
        axios.get("/menu/menuftype/"+ftype).then(res=>{
          this.foods = res.data.data;
        })

      }
    }

  })
</script>
</html>
